<template>
    <div style="margin-top: 100px">
    <div>
    <span>
    <!-- 搜索大事提醒信息的搜索栏 -->
    <el-input v-model="searchNo"
              placeholder="请输入事件名称"
              style="width: 50%;height: 40px"
              type="text"
    ></el-input>
    <el-button size="small" type="primary" @click="searchByEventName(searchNo)" style="position: relative; left: 5px; height: 40px">搜索</el-button>
    <!-- 新增大事提醒按钮 -->
    <el-button size="small" type="success" @click="showAddDialog" style="position: relative; left: 5px; height: 40px">新增</el-button>
        </span>
    </div>
        <!-- 大事表格 -->
        <el-table :data="eventData" height="80vh">
            <el-table-column prop="eventName" label="大事名称" width="400" align="center"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="300" align="center"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="300" align="center"></el-table-column>
            <el-table-column prop="eventMessage" label="大事内容" width="500" align="center"></el-table-column>
            <el-table-column align="center" label="操作" width="300">
                <template v-slot="scope">
                    <!-- 删除按钮 -->
                    <el-button size="small" type="danger" @click="deleteEvent(scope.row.id)">删除</el-button>
                    <!-- 修改信息按钮 -->
                    <el-button size="small" type="primary" @click="change(scope.row)">修改信息</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[50, 100 , 200 , 500,1000,2000,5000]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="page.total">
        </el-pagination>
    </div>
<!-- 修改大事框 -->
    <el-dialog title="大事提醒操作" v-model="this.dialogVisible" width="30%">
        <el-form :model="this.editForm"  :rules="editFormRules" ref="editForm">
            <el-form-item label="大事名称" prop="eventName">
                <el-input v-model="this.editForm.eventName"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                    v-model="this.editForm.startTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择开始日期时间"
                    :editable="false">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间"  prop="endTime">
                <el-date-picker
                    v-model="this.editForm.endTime"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择结束日期时间"
                    :editable="false">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="大事内容" prop="eventMessage">
                <el-input v-model="this.editForm.eventMessage" autocomplete="off"></el-input>
            </el-form-item >
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false ;this.editForm={}">取 消</el-button>
            <el-button type="primary" @click="confirmChange">确 定</el-button>
        </div>
    </el-dialog>

  <!-- 新增大事提醒的对话框 -->
    <el-dialog title="新增大事提醒" v-model="addDialogVisible">
        <!-- 表单组件 -->
        <el-form :model="addForm" :rules="getRules" ref="addFormRef">
            <!-- 大事名称 -->
            <el-form-item label="大事名称" prop="eventName" :rules="getRules('eventName')">
                <el-input v-model="addForm.eventName" autocomplete="off"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="24" :md="12">
                    <!-- 大事开始时间 -->
                    <el-form-item label="大事开始时间" prop="startTime" :rules="getRules('startTime')">
                        <el-date-picker
                            v-model="addForm.startTime"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择开始日期时间"
                            :editable="false">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24" :md="12">
                    <!-- 大事结束时间 -->
                    <el-form-item label="大事结束时间" prop="endTime" :rules="getRules('endTime')">
                        <el-date-picker
                            v-model="addForm.endTime"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择结束日期时间"
                            :editable="false">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 大事内容 -->
            <el-form-item label="大事内容" prop="eventMessage" :rules="getRules('eventMessage')">
                <el-input v-model="addForm.eventMessage" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmAdd">确定</el-button>
        </div>
    </el-dialog>

</template>
<script>
import request from "@/util/request.js";
import { ref } from 'vue';
import {ElMessage} from "element-plus";
import {activity, event_manage} from "@/util/permissionJudgment.js";

export default {
    data() {
        return {
            eventData: [], // 大事数据
            currentPage: 1, // 当前页码
          pageSize: 50, // 每页显示条数
            total: 0,// 总条数
            rules: {
                eventName: [
                    {required: true, trigger: 'blur', message: "大事名称不能为空"}
                ],
                startTime: [
                    {required: true, trigger: 'blur', message: "大事开始时间不能为空"}
                ],
                endTime: [
                    {required: true, trigger: 'blur', message: "大事结束时间不能为空"}
                ],
                eventMessage: [
                    {required: true, trigger: 'blur', message: "大事内容不能为空"}
                ],
            },

            editForm: {
                eventName: '',
                startTime: '',
                endTime: '',
                eventMessage: ''
            },
            editFormRules: {
                eventName: [
                    { required: true, message: '请输入大事名称', trigger: 'blur' }
                ],
                startTime: [
                    { type: 'date', required: true, message: '请选择开始时间', trigger: 'change' }
                ],
                endTime: [
                    { type: 'date', required: true, message: '请选择结束时间', trigger: 'change' }
                ],
                eventMessage: [
                    { required: true, message: '请输入大事内容', trigger: 'blur' }
                ]
            },

            searchNo: '', // 用于存储搜索的ID
            page: {
                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示条数
                total: 0 // 总条数
            },
            dialogVisible: false,// 控制修改大事提醒对话框的显示

                startTime: '',
                endTime: '',

            addDialogVisible: false, // 控制新增大事提醒对话框的显示
            addForm: {},
        };
    },
    // },
    computed: {
        // 获取表单验证规则
        getRules() {
            return (fieldName) => {
                return this.rules[fieldName] || [];
            };
        }
    },
    methods: {
        // editPickerEndTime(){
        //     if (Date.parse(this.editForm.endTime)<Date.parse(this.editForm.startTime)){
        //         this.$message({
        //             message: "结束时间在开始时间前面",
        //             type: 'warning'
        //         })
        //     }
        // },

        handleSizeChange(newSize) {
            this.page.pageSize = newSize;
            this.getEvents();
        },
        handleCurrentChange(newPage) {
            this.page.currentPage = newPage;
            this.getEvents();
        },
        getEvents() {
            let url = `/info_event/page?pageNum=${this.page.currentPage}&pageSize=${this.page.pageSize}`;
            request.get(url)
                .then((res) => {
                    if (res.data.code === "200") {
                        this.eventData = res.data.data.records;
                        this.page.total = res.data.data.total;
                    }
                })
        },
        searchByEventName(searchNo) {
            // 构造搜索的 URL
            let url = `/info_event/getOneByEventName?eventName=${searchNo}`;
            if (searchNo===null) {
                this.getEvents();
            } else {
                // 向后端服务器发送搜索请求
                request.get(url)
                    .then((res) => {
                        if (res.data.code === "200") {
                            // 处理返回的数据
                            if (res.data.data) {
                                this.eventData = res.data.data; // 更新前端表格的数据
                            } else {
                                // 如果搜索结果为空，清空表格数据并给出提示
                                this.eventData = [];
                                this.$message({
                                    type: 'info',
                                    message: '没有找到匹配的大事提醒'
                                });
                            }
                        }
                    })
            }
        },
        deleteEvent(id) {
            this.$confirm('此操作将永久删除该事件提醒, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 确认删除，向服务器发送请求
                request.get(`/info_event/delete/${id}`)
                    .then(() => {
                        // 删除成功，重新获取数据
                        this.getEvents();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
            })
        },
        change(row) {
            this.editForm = JSON.parse(JSON.stringify(row));
            this.dialogVisible = true;
        },

        confirmChange() {
            // 验证表单
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    // 表单验证通过，执行确认更改的逻辑
                    if (this.editForm.id) {
                        // 如果存在ID，则执行修改操作
                        request
                            .post('/info_event/edit', this.editForm)
                            .then(() => {
                                this.dialogVisible = false; // 关闭对话框
                                this.getEvents(); // 重新获取数据
                                this.$message({
                                    type: 'success',
                                    message: '更新成功!',
                                });
                            })
                    } else {
                        // 如果不存在ID，则执行新增操作
                        request.post('/info_event/edit', this.editForm)
                            .then(() => {
                                this.dialogVisible = false; // 关闭对话框
                                this.getEvents(); // 重新获取数据
                                this.$message({
                                    type: 'success',
                                    message: '新增成功!',
                                });
                                this.addDialogVisible = false;
                            })
                    }
                }
            });
        },


        showAddDialog() {
            this.addDialogVisible = true; // 显示新增大事提醒对话框
            this.addForm = {}; // 重置表单
        },
        confirmAdd() {
            // 调用表单验证方法
            this.$refs.addFormRef.validate((valid) => {
                if (valid) {
                    // 表单验证通过，执行相关逻辑
                    request.post('/info_event/edit', this.addForm) // 发送POST请求到服务器
                        .then(() => {
                            this.addDialogVisible = false; // 关闭对话框
                            this.getEvents(); // 重新获取数据
                            this.$message({
                                type: 'success',
                                message: '新增成功!',
                            });
                        })
                }
            });
        },

    },
    created() {
        this.getEvents();
    }
};
</script>
<style>
@media (max-width: 768px) {
    .el-form-item {
        margin-bottom: 20px; /* 在小屏幕上增加更多的底部边距 */
    }
}
</style>
